<template>
    <div class="main_box" style="padding:10px">
        <el-card class="header-card">
            <div slot="header">
                <div class="header">
                    <i @click="returnList" class="el-icon-arrow-left"></i>
                    <div class="separater">|</div>
                    <div class="title">{{ dataInfo.equipName }}</div>
                </div>
            </div>
            <el-row>
                <el-col class="right-info1">
                    <el-row class="header-info">
                        <el-col class="header-img__wrapper">
                            <div>
                                <img title="点击下载图片" @click="downloadByBlob(dataInfo.wxAppUrl, '燃气报警器二维码')"
                                    :src="dataInfo.wxAppUrl" width="170" style="cursor:pointer">

                            </div>
                        </el-col>
                        <el-col class="text-info">
                            <el-col>
                                <el-col>燃气报警器编号:</el-col>
                                <el-col>{{ dataInfo.equipCode }}</el-col>
                            </el-col>
                            <el-col>
                                <el-col>燃气报警器昵称:</el-col>
                                <el-col>{{ dataInfo.equipNickName }}</el-col>
                            </el-col>
                            <el-col>
                                <el-col>MAC地址:</el-col>
                                <el-col>{{ dataInfo.equipMac }}</el-col>
                            </el-col>
                            <el-col>
                                <el-col>呼叫器:</el-col>
                                <el-col>{{ dataInfo.beeperName }}</el-col>
                            </el-col>

                            <el-col>
                                <el-col>在线/报警状态:</el-col>
                                <el-col>
                                    {{ formatEquipState(dataInfo.equipState) }} -
                                    <span v-if="dataInfo.errorState == 0" style="color:green;font-weight: bolder;">正常</span>
                                    <span v-if="dataInfo.errorState == 1" style="color:red;font-weight: bolder;">报警</span>
                                </el-col>
                            </el-col>
                            <el-col>
                                <el-col>创建时间:</el-col>
                                <el-col>{{ dataInfo.createDate }}</el-col>
                            </el-col>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="body-card">
            <el-tabs v-model="activeName" @tab-click="tabClick">
                <el-tab-pane label="基本信息" name="userInfo">
                    <el-form>
                        <el-row>
                            <el-form-item label="燃气报警器类型:">
                                <span>{{ formatGasType(dataInfo.gasType) }}</span>
                            </el-form-item>
                            <el-form-item label="安装区域:">
                                <span>{{ dataInfo.installArea }}</span>
                            </el-form-item>
                            <el-form-item label="厂家:">
                                <span>{{ dataInfo.factoryName }}</span>
                            </el-form-item>
                            <el-form-item label="阀门状态:" v-if="dataInfo.valveState !== 2">
                                <span v-if="dataInfo.valveState === 0" style="color:green;font-weight: bolder;">开</span>
                                <span v-if="dataInfo.errorState === 1" style="color:grey;font-weight: bolder;">关</span>
                            </el-form-item>
                            <el-form-item label="物联网卡号:">
                                <span>{{ dataInfo.iccid }}</span>
                            </el-form-item>
                            <el-form-item label="设备激活日期-流量截止日期">
                                <span>
                                    {{ dataInfo.activeDate }} - {{ dataInfo.flowEndDate }}
                                </span>
                            </el-form-item>
                            <el-form-item label="创建人:">
                                <span>{{ dataInfo.createUserName }}</span>
                            </el-form-item>
                            <el-form-item label="修改人:">
                                <span>{{ dataInfo.modifyUserName }}</span>
                            </el-form-item>
                            <el-form-item label="修改时间:">
                                <span>{{ dataInfo.modifyDate }}</span>
                            </el-form-item>
                            <el-form-item label="备注:">
                                <span>{{ dataInfo.remark }}</span>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="心跳记录" name="heartBeat">
          <heartbearRecord
            :typeName="activeName"
            :equipId="dataInfo.equipId"
          ></heartbearRecord>
        </el-tab-pane>
        <el-tab-pane label="报警记录" name="alarm">
          <alarmRecord
            :typeName="activeName"
            :equipId="dataInfo.equipId"
          ></alarmRecord>
        </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import GasApi from '@/api/equip/gas';
import BeeperApi from '@/api/equip/beeper';
import alarmRecord from "@/components/AlarmRecord.vue";
import heartbearRecord from "@/components/HeartbeatRecord.vue";
export default {
    data() {
        return {
            dataInfo: {},
            equipLogs: [],
            activeName: this.$route.query.hasOwnProperty('recordType') ? this.$route.query.recordType : "userInfo"
        };
    },
    components: { alarmRecord, heartbearRecord },
    computed: {
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            GasApi.getGasInfo({ id: this.$route.query.id }).then(res => {
                this.dataInfo = res.data
                // BeeperApi.heartbeatList({ equipId: this.dataInfo.equipId })
                //     .then(res => {
                //         this.equipLogs = res.data
                //     })
            })
        },
        tabClick(tab, event) {
            this.activeName = tab.name;
        },
        download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name
            eleLink.href = href
            eleLink.click()
            eleLink.remove()
        },
        downloadByBlob(url, name) {
            let image = new Image()
            image.setAttribute('crossOrigin', 'anonymous')
            image.src = url
            image.onload = () => {
                let canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                let ctx = canvas.getContext('2d')
                ctx.drawImage(image, 0, 0, image.width, image.height)
                canvas.toBlob((blob) => {
                    let url = URL.createObjectURL(blob)
                    this.download(url, name)
                    // 用完释放URL对象
                    URL.revokeObjectURL(url)
                })
            }
        },
        formatEquipState(cellValue) {
            if (cellValue === 0) {
                return '未开通'
            } else if (cellValue === 1) {
                return '未激活'
            } else if (cellValue === 2) {
                return '在线'
            } else if (cellValue === 3) {
                return "离线"
            }
        },
        formatGasType(cellValue) {
            if (cellValue === 1) {
                return "NB-IoT"
            } else if (cellValue === 2) {
                return "WIFI"
            } else if (cellValue === 3) {
                return "网关"
            }
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/equip/gasManagement' })
        }
    },

}

</script>
<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>

<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
